'use client'

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { Download } from "lucide-react"

interface FunnelData {
  [key: string]: {
    pv: number[]
    uv: number[]
  }
}

interface FunnelTableProps {
  data: FunnelData
  steps: string[]
}

export function FunnelTable({ data, steps }: FunnelTableProps) {
  const calculateConversion = (current: number, previous: number) => {
    return ((current / previous) * 100).toFixed(1)
  }

  const handleDownload = (format: 'csv' | 'excel') => {
    // 实现下载逻辑
    console.log(`Downloading in ${format} format...`)
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end space-x-2">
        <Button variant="outline" size="sm" onClick={() => handleDownload('csv')}>
          <Download className="mr-2 h-4 w-4" />
          CSV
        </Button>
        <Button variant="outline" size="sm" onClick={() => handleDownload('excel')}>
          <Download className="mr-2 h-4 w-4" />
          Excel
        </Button>
      </div>

      {Object.entries(data).map(([metric, metricData]) => (
        <div key={metric} className="space-y-2">
          <h4 className="font-medium">{metric}</h4>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>步骤</TableHead>
                <TableHead className="text-right">PV</TableHead>
                <TableHead className="text-right">转化率</TableHead>
                <TableHead className="text-right">UV</TableHead>
                <TableHead className="text-right">转化率</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {steps.map((step, index) => (
                <TableRow key={step}>
                  <TableCell className="font-medium">{step}</TableCell>
                  <TableCell className="text-right">{metricData.pv[index]}</TableCell>
                  <TableCell className="text-right">
                    {index === 0 ? '-' : `${calculateConversion(metricData.pv[index], metricData.pv[index - 1])}%`}
                  </TableCell>
                  <TableCell className="text-right">{metricData.uv[index]}</TableCell>
                  <TableCell className="text-right">
                    {index === 0 ? '-' : `${calculateConversion(metricData.uv[index], metricData.uv[index - 1])}%`}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      ))}
    </div>
  )
} 